import { Tabs, Form, Input, Button, Toast, NavBar } from 'antd-mobile'
// 导入需要的 antd 图标组件
import { PhoneFill, MessageFill } from 'antd-mobile-icons'
import styles from './css/Index.module.css'
import { useCountDown } from '../../hooks/index'
import { getCodeApi, loginPhoneApi } from '../../api/user'
import { useNavigate } from 'react-router-dom'
// import { useDebounce } from '../../hooks/index'
import { useDebounce2 } from '../../hooks'
import QRCode from 'react-qr-code'
import Account from './components/Account'

function Login() {
  const [fn, num, isDisabled] = useCountDown()
  // 表单的实例对象（JS对象）
  const [form] = Form.useForm()
  const nav = useNavigate()

  // 点击登录按钮
  const onSubmit = async () => {
    // 先对表单数据的合法性，进行校验
    // 校验通过,调用接口
    // 校验不通过，不调用接口
    // 如果校验通过了，则 result 就是表单的数据
    try {
      // await 表示等待异步操作的结束
      // 如果调用某个方法，方法的返回值是 Promise 对象，那么这个 Promise 对象就表示一个异步操作
      const result = await form.validateFields()
      const { data: res } = await loginPhoneApi(result)
      // 处理 info 中的数据，比如存 token
      localStorage.setItem('token', res.token)
      nav('/', { replace: true })
    } catch {
      console.log('表单校验失败了！')
    }
  }

  const [debounceFn, flag] = useDebounce2()

  // const [debounceFn] = useDebounce(onSubmit)

  // 点击按钮，获取手机验证码
  const getPhoneCode = async () => {
    // 验证手机号是否合法
    // 1. 先获取到 Form 表单的 ref 引用
    // 2. 拿着表单的 ref 引用，调用 getFieldValue() 函数，获取指定 name 表单项的值
    const val = form.getFieldValue('tel')
    const reg = /^1\d{10}$/
    if (reg.test(val)) {
      // 校验通过
      // 开启倒计时
      fn()
      const result = await getCodeApi(val)
      // form.setFieldValue(表单项的name名称, 值)
      form.setFieldValue('telCode', result.data.telCode)
      // 获取验证码
    } else {
      // 校验不通过
      Toast.show('请输入正确的手机号！')
    }
  }

  return (
    <div className="pageHeader">
      <div style={{ position: 'relative', zIndex: 1, color: '#fff' }}>
        <NavBar onBack={() => nav(-1)}>登录</NavBar>
      </div>
      {/* 绘制 tabs  */}
      <div className={styles.tabs}>
        <Tabs>
          <Tabs.Tab
            title="账号登录"
            key="account"
          >
            <Account />
          </Tabs.Tab>
          <Tabs.Tab
            title="手机登录"
            key="phone"
          >
            <Form
              form={form}
              layout="horizontal"
              mode="card"
              requiredMarkStyle="none"
              disabled={flag}
              footer={
                <Button
                  block
                  color="primary"
                  onClick={() => debounceFn(onSubmit, 2500, true)}
                  size="large"
                >
                  登录
                </Button>
              }
            >
              {/* 手机号的表单项 */}
              <Form.Item
                name="tel"
                rules={[
                  // 验证规则
                  { required: true, message: '请输入手机号' },
                  // 手机号的正则校验
                  { pattern: /^1\d{10}$/, message: '请填写正确的手机号' }
                ]}
                label={<PhoneFill />}
                style={{ '--prefix-width': 30 }}
              >
                <Input placeholder="请输入手机号" />
              </Form.Item>
              {/* 手机验证码 */}
              <Form.Item
                name="telCode"
                rules={[
                  // 必填项
                  { required: true, message: '请输入验证码' }
                ]}
                label={<MessageFill />}
                style={{ '--prefix-width': 30 }}
                extra={
                  <Button
                    fill="none"
                    onClick={getPhoneCode}
                    disabled={isDisabled}
                  >
                    {isDisabled ? `(${num}s)后重新发送` : '发送验证码'}
                  </Button>
                }
              >
                <Input placeholder="请输入验证码" />
              </Form.Item>
            </Form>
          </Tabs.Tab>
          <Tabs.Tab
            title="扫码登录"
            key="qr"
          >
            <div style={{ textAlign: 'center' }}>
              <QRCode value="https://escook.cn" />
            </div>
          </Tabs.Tab>
        </Tabs>
      </div>
    </div>
  )
}

export default Login
